<!--用户管理页-->
<template>
    <div style="height:6vh;padding:10px 20px;background-color:#fff;">
      <span style="line-height:60px;font-size:20px;">设备管理</span>
      <el-button type="primary" @click="beforeAddEquipment"
                 style="float: right;margin-top:10px;">新增设备</el-button>
    </div>
    <!-- 新建用户弹窗 -->
    <el-dialog
        title="新增设备"
        style="width: 1000px;padding:40px;"
        v-model="dialogVisible"
        :before-close="handleClose"
    >
      <el-form label-width="80px" label-position="top">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="设备编号">
              <el-input placeholder="请输入设备编号" v-model="saveEquiment.number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备名称">
              <el-input placeholder="请输入设备名称"  v-model="saveEquiment.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="设备序列号">
              <el-input placeholder="请输入设备序列号" v-model="saveEquiment.parking_id"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态">
              <el-radio-group v-model="saveEquiment.status">
                <el-radio border label="启用" value="1" style="margin: 0;"></el-radio>
                <el-radio border label="禁用" value="0"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </template>
    </el-dialog>

  <el-card style="margin: 20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="设备名搜索" style="width: 220px;">
        <el-input placeholder="请输入设备名"
                  v-model="searchEquipment.name" @keydown.enter="loadEquipment"></el-input>
      </el-form-item>
      <el-form-item label="设备序列号搜索" style="width: 220px;">
        <el-input placeholder="请输入序列号"
                  v-model="searchEquipment.number" @keydown.enter="loadEquipment"></el-input>
      </el-form-item>
      <el-form-item label="停车场id搜索" style="width: 220px;">
        <el-input placeholder="请输入停车场id"
                  v-model="searchEquipment.parkingId" @keydown.enter="loadEquipment"></el-input>
      </el-form-item>
      <el-form-item label="设备状态" style="width: 290px;">
        <el-select placeholder="请选择用户状态"
                   v-model="searchEquipment.status" @change="loadEquipment">
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadEquipment">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card style="margin:20px">
    <el-table :data="EquimentArr">
      <el-table-column  width="80" align="center" type="index" label="编号"></el-table-column>
      <el-table-column align="center" prop="name" label="设备名称"></el-table-column>
      <el-table-column align="center" prop="parkingId" label="停车场id"></el-table-column>
      <el-table-column align="center" prop="number" label="序列号"></el-table-column>
      <el-table-column align="center" prop="status" label="设备状态">
        <template #default="scope">
          <el-switch active-value="1" inactive-value="0"
                     v-model="scope.row.status"
          @change="changeStatus(scope.row.id,scope.row.status)"></el-switch>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>


<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import qs, {parse} from "qs";
import {ElMessage} from "element-plus";
//定义变量控制弹窗是否出现
const dialogVisible = ref(false);

const dialogTitle = ref("新建用户");

const searchEquipment=ref({ name:'',parking_id:'',number:'',status:''});

const beforeAddEquipment = ()=>{
  dialogTitle.value = "新建用户";
  dialogVisible.value = true;
}

const saveEquiment=ref({
  name:'',
  parkingId:'',
  number:'',
  status:''
})

const handleClose = ()=>{
  if(confirm("确定要关闭弹窗吗?")){
    //关闭弹窗且清空已输入的数据
    dialogVisible.value = false;
    saveEquiment.value={};
  }
}

const EquimentArr=ref([]);

const loadEquipment = () => {
  let data=qs.stringify(searchEquipment.value);
  axios.get(BASE_URL+'/v1/equipment/select?'+data).then((response)=>{
    if (response.data.code==2000){
      EquimentArr.value=response.data.data;
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}

onMounted(()=>{
  loadEquipment();
})

//定义重置按钮的方法
const resetSearch = ()=>{
  //清空之前写的搜索条件
  searchEquipment.value={};
  //重新加载所有的用户数据
  loadEquipment();
}

const save = () => {
  let data=qs.stringify(saveEquiment.value);
  axios.post(BASE_URL+'/v1/equipment/save',data)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success('保存成功');
          dialogVisible.value=false;
          saveEquiment.value={};
          loadEquipment();
        }else {
          ElMessage.error(response.data.msg);
        }
      })
}

const changeStatus = (id,status) => {
  axios.post(BASE_URL+'/v1/equipment/update/status/'+id+'/'+status)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success('修改成功');
        }else {
          ElMessage.error(response.data.msg);
        }
      })
}
</script>

<style scoped>

</style>